(function() {

z.knm = function () {
    var othis = this;
    
    var wrap = document.createElement('div');
    wrap.className = 'knm';
    wrap.style.display = 'none';
    wrap.style.position = 'absolute';
    wrap.style.left = '100px';
    wrap.style.top = '100px';
    document.body.appendChild(wrap);
    /*wrap.onmouseout = function () {
        wrap.style.display = 'none';
    };*/
    
    var hide_button = document.createElement('div');
    hide_button.className = 'hide_button';
    wrap.appendChild(hide_button);
    hide_button.onclick = function () {
        othis.wrap.style.display = 'none';
    };
    
    var first_item = this.create_item({word:'',bg_color: 'FFFFFF'});
    wrap.appendChild(first_item);
    
    var container = document.createElement('div');
    container.className = 'container';
    wrap.appendChild(container);
    
    
    this.loading_img_html = '<img src="' + z.cdn_url('img/icon/loading3.gif') + '" alt="loading"/>';
    this.first_item = first_item;
    this.wrap = wrap;
    this.container = container;
    this.isloading = false;
};

z.knm.prototype = {
    show: function (word) {
        var othis = this;
        word = z.clean_keyword(word);
        if (word == '') {
            this.wrap.style.display = 'none';
            return;
        }
        
        
        
        this.current_word = word;
        this.first_item.set_word(word);
        
        this.start_loading();
        if ( ! this.isloading) {
            this.isloading = true;
            var requestUrl = z.site_url('?m=node&a=search_keywords&method=json&word=' + word);
            z.net.getJSON(requestUrl, null, function (xhr) {
                //othis.clear();
                othis.container.innerHTML = '';
                var response_text = xhr.responseText;
                //var keywords = z.parseJSON(xhr.responseText);
                if (response_text != '') {
                    var keywords = z.parseJSON(response_text);
                    var index = 1;
                    var _first_item = false;
                    var _first_keyword = false;
                    for (var i in keywords) {
                        var keyword = keywords[i];
                        var _item = othis.create_item(keyword, word);
                        othis.container.appendChild(_item);
                        if (index == 1) {
                            _first_item = _item;
                            _first_keyword = keyword;
                        }
                        index ++;
                    }
                    othis.search_nodes(_first_keyword, _first_item.body, true);
                } else {
                    othis.isloading = false;
                    //othis.end_loading();
                    othis.container.innerHTML = '';
                    othis.end_loading();
                }
                //othis.end_loading();
            });
        }
        this.wrap.style.display = 'block';
    },
    start_loading: function () {
        if ( ! this.loading_wrap) {
            this.loading_wrap = document.createElement('div');
            this.loading_wrap.className = 'loading';
            this.loading_wrap.innerHTML = this.loading_img_html;
            this.wrap.appendChild(this.loading_wrap);
        }
        this.loading_wrap.style.display = 'block';
    },
    end_loading: function () {
        this.loading_wrap.style.display = 'none';
        //this.container.removeChild(this.loading_wrap);
    },
    add_keyword: function (keyword, compare_word) {
        var item = this.create_item(keyword, compare_word);
        this.container.appendChild(item);
        
    },
    create_item: function (keyword, compare_word) {
        var othis = this;
        
        var word = keyword.word;
        var keyword_id = keyword.id;
        var color = keyword.color || '333333';
        var bg_color = keyword.bg_color || 'E8EDF0';
        var html_word = word;
        
        if (compare_word) {
            if (word)
                html_word = word.replace(compare_word, '<b>' + compare_word + '</b>');
            else {
                alert(word);
            }
        }
        
        var item = document.createElement('div');
        item.className = 'item';
        
        var head = document.createElement('div');
        head.className = 'head';
        item.appendChild(head);
        
        var body = document.createElement('div');
        body.className = 'body';
        item.appendChild(body);
        item.body = body;
        
        if (keyword_id) {
            var more_button = document.createElement("a");
            more_button.className = 'more';
            more_button.href = 'javascript:;';
            more_button.innerHTML = 'more';
            head.appendChild(more_button);
            more_button.onclick = function () {
                othis.search_nodes(keyword, body);
            };
        }
        
        var add_button = document.createElement('a');
        add_button.className = 'add';
        add_button.href = 'javascript:;';
        add_button.innerHTML = 'add';
        head.appendChild(add_button);
        add_button.onclick = function () {
            keyword.is_new = true;
            othis.select_keyword(keyword);
        };
        
        var label = document.createElement('a');
        label.href = 'javascript:;';
        label.className = 'keyword';
        label.style.color = '#' + color;
        label.style.backgroundColor = '#' + bg_color;
        
        label.innerHTML = html_word;
        head.appendChild(label);
        label.onclick = function () {
            othis.search_nodes(keyword, body);
        };
        //item.label = label;
        item.set_word = function (_w) {
            keyword.word = _w;
            label.innerHTML = _w;
        };
        
        return item;
    },
    set_pos: function (x, y) {
        var wrap = this.wrap;
        wrap.style.left = x + 'px';
        wrap.style.top = y + 'px';
    },
    clear: function () {
        var container = this.container;
        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }
    },
    select_keyword: function (keyword) {
        if (this.on_select_keyword) {
            //var keyword = {word: word};
            var w = this.keyword(keyword);
            if (w) {
                w.word.changed = true;
                this.on_select_keyword.call(this, w);
            }
            //this.wrap.style.display = 'none';
        } else {
            alert(keyword);
        }
    },
    display: function () {
        this.wrap.style.display = 'block';
    },
    search_nodes: function (keyword, body, is_refresh) {
        var othis = this;
        var keyword_id = keyword.id;
        body.innerHTML = this.loading_img_html;
        var requestUrl = z.site_url('?m=node&a=search_nodes_by_keyword_id&method=json&keyword_id=' + keyword_id);
        z.net.getJSON(requestUrl, null, function (xhr) {
            var response_text = xhr.responseText;
            body.innerHTML = '';
            if (response_text != '') {
                var nodes = z.parseJSON(xhr.responseText);
                for(var index in nodes) {
                    body.appendChild(othis.create_node_element(nodes[index], index));
                }
                if (is_refresh && othis.current_word != keyword.word) {
                    othis.show(othis.current_word);
                }
            }
            othis.isloading = false;
            othis.end_loading();
        });
    },
    create_node_element: function (node_html, node_id) {
        var othis = this;
        var div = document.createElement("div");
        var add_bt = document.createElement('a');
        add_bt.href = "javascript:;";
        add_bt.innerHTML = 'add';
        add_bt.className = 'add';
        div.appendChild(add_bt);
        
        add_bt.onclick = function () {
            if (othis.on_select_node) {
                var obj = {node_id:node_id, node_html: node_html};
                othis.on_select_node.call(obj);
            }
        };
        
        var body = document.createElement("div");
        body.innerHTML = node_html;
        
        div.appendChild(body);
        
        return div;
    },
    keyword: function (params) {
        var word = params.word;
        var keyword_id = params.id;
        var color = params.color || '333333';
        var bg_color = params.bg_color || 'E8EDF0';
        var is_new = params.is_new || false;

        var k_id = null;
        k_id = 'k_' + z.clean_url(word);
        var item = z.s(k_id);
        if (item) {
            alert('keyword already exists');
            return false;
        }
        
        
        var w = document.createElement('div');
        w.className = 'keyword';
        w.id = k_id;

        var delete_bt = document.createElement('a');
        delete_bt.href = 'javascript:;';
        delete_bt.className = 'delete';
        delete_bt.innerHTML = 'delete';
        delete_bt.onclick = function () {
            var parent = w.parentNode;
            parent.removeChild(w);
            if ( ! is_new) {
                var delete_hidden = document.createElement('input');
                delete_hidden.type = 'hidden';
                delete_hidden.changed = true;
                delete_hidden.name = 'remove_keyword_ids[]';
                delete_hidden.value = keyword_id;
                parent.appendChild(delete_hidden);
            }
        };
        w.appendChild(delete_bt);
        
        var label = document.createElement('div');
        label.innerHTML = '<span style="color:#' + color + ';background:#' + bg_color + ';">' + word + '</span>';
        label.className = 'label';
        w.appendChild(label);

        var hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.changed = false;
        hidden.name = 'words[]';
        hidden.value = word;
        w.word = hidden;

        w.appendChild(hidden);
        return w;
    }
};

})();